<template>
  <div>
    <!-- 饼图 -->
    <Pie
      v-if="graphType === 'pie'"
      :title="title ? head.name : ''"
      @click="handleChartClick($event, 'pie')"
      :chartData="chartDataSource"
      :option="chartOption"
      height="50vh"
    />
    <!-- 柱状图 -->
    <!-- <Bar
      v-else-if="graphType === 'bar'"
      :title="title ? head.name : ''"
      @click="handleChartClick($event, 'bar')"
      :chartData="barMultiData"
      :option="{ title: { text: '销售额排行', left: 'center' } }"
    /> -->
    <!-- 多列柱状图 -->
    <BarMulti
      v-else-if="graphType === 'bar'"
      :title="title ? head.name : ''"
      @click="handleChartClick($event, 'bar')"
      :chartData="chartDataSource"
      :option="chartOption"
      height="50vh"
    />
    <!-- 面积图 -->
    <!-- <Line :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }" /> -->
    <!-- 多行折线图 -->
    <LineMulti
      v-else-if="graphType === 'line'"
      :title="title ? head.name : ''"
      @click="handleChartClick($event, 'line')"
      :chartData="chartDataSource"
      :option="chartOption"
      type="line"
      height="50vh"
    />

    <!-- 雷达图 -->
    <Radar
      v-else-if="graphType === 'radar'"
      :title="title ? head.name : ''"
      @click="handleChartClick($event, 'radar')"
      :chartData="chartData"
      height="50vh"
    />

    <!-- 仪表盘 -->
    <!-- <Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh" /> -->
    <!-- 折柱图 -->
    <!-- <BarAndLine :chartData="barLineData" height="50vh" /> -->
    <!-- 排名列表 -->
    <!-- <RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto" /> -->
    <!-- 趋势 -->
    <!-- <trend title="Trend" term="Trend：" :percentage="30" /> -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, watch, ref, onMounted } from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import BarMulti from '/@/components/chart/BarMulti.vue';
  import Line from '/@/components/chart/Line.vue';
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import Pie from '/@/components/chart/Pie.vue';
  import Radar from '/@/components/chart/Radar.vue';
  import Gauge from '/@/components/chart/Gauge.vue';
  import RankList from '/@/components/chart/RankList.vue';
  import Trend from '/@/components/chart/Trend.vue';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  export default defineComponent({
    name: 'Chart',
    components: {
      Bar,
      BarMulti,
      Line,
      LineMulti,
      Pie,
      Radar,
      Gauge,
      RankList,
      Trend,
      BarAndLine,
    },
    props: {
      chartData: {
        type: Array,
        default: () => [],
      },
      head: {
        type: Object,
        default: () => ({}),
      },
      graphType: {
        type: String as PropType<string>,
        default: '',
      },
      title: {
        type: String as PropType<string>,
        default: '',
      },
      aliases: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const chartDataSource = ref<any>([]);
      const chartOption = ref<any>({});

      onMounted(() => {
        props.chartData && initCharts();
      });

      watch(
        () => props.graphType,
        () => {
          initCharts();
        },
        { deep: true }
      );

      function initCharts() {
        if (props.graphType === 'bar') {
          initBarData();
        } else if (props.graphType === 'line') {
          initLineData();
        } else if (props.graphType === 'pie') {
          initPieData();
        }
      }

      // 柱装图
      function initBarData() {
        let chartDS = [];
        for (var i = 0; i < props.chartData.length; i++) {
          let data = {
            name: '',
            value: '',
            type: props.head.yaxisText,
          };
          for (let key in props.chartData[i]) {
            if (props.head.xaxisField == key) {
              data.name = props.chartData[i][key];
            } else if (props.head.yaxisField == key) {
              data.value = props.chartData[i][key];
            } else if (props.head.groupField == key) {
              data.type = props.chartData[i][key];
            }
          }
          chartDS.push(data);
        }
        chartDataSource.value = chartDS;

        if (props.head.groupField && props.head.groupField.length > 0) {
          chartOption.value = {
            yAxis: [
              {
                name: props.head.yaxisText,
                nameTextStyle: {
                  color: '#000',
                  fontSize: 14,
                },
              },
            ],
          };
        }
      }

      // 拆线图
      function initLineData() {
        let chartDS = [];
        for (var i = 0; i < props.chartData.length; i++) {
          let data = {
            name: '',
            value: '',
            type: props.head.yaxisText,
          };
          for (let key in props.chartData[i]) {
            if (props.head.xaxisField == key) {
              data.name = props.chartData[i][key];
            } else if (props.head.yaxisField == key) {
              data.value = props.chartData[i][key];
            } else if (props.head.groupField == key) {
              data.type = props.chartData[i][key];
            }
          }
          chartDS.push(data);
        }
        chartDataSource.value = chartDS;

        if (props.head.groupField && props.head.groupField.length > 0) {
          chartOption.value = {
            yAxis: [
              {
                name: props.head.yaxisText,
                nameTextStyle: {
                  color: '#000',
                  fontSize: 14,
                },
              },
            ],
          };
        }
      }

      // 饼图一
      function initPieData() {
        let chartDS = [];
        let legendData = [];
        for (var i = 0; i < props.chartData.length; i++) {
          let data = {
            name: '',
            value: '',
          };
          for (let key in props.chartData[i]) {
            if (props.head.xaxisField == key) {
              data.name = props.chartData[i][key];
              legendData.push(data.name);
            } else if (props.head.yaxisField == key) {
              data.value = props.chartData[i][key];
            }
          }
          chartDS.push(data);
        }
        chartDataSource.value = chartDS;

        chartOption.value = {
          title: {
            text: props.head.yaxisText,
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 20,
            },
          },
          legend: {
            data: legendData,
            textStyle: {
              color: '#000000',
            },
          },
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['40%', '70%'],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',
                rich: {
                  hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-13, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
            },
          ],
        };
      }

      // 饼图二
      function initPieData_02() {
        let chartDS = [];
        let legendData = [];
        for (var i = 0; i < props.chartData.length; i++) {
          let data = {
            name: '',
            value: '',
          };
          for (let key in props.chartData[i]) {
            if (props.head.xaxisField == key) {
              data.name = props.chartData[i][key];
              legendData.push(data.name);
            } else if (props.head.yaxisField == key) {
              data.value = props.chartData[i][key];
            }
          }
          chartDS.push(data);
        }
        chartDataSource.value = chartDS;

        chartOption.value = {
          legend: {
            // x: 'left',
            data: legendData,
            textStyle: {
              color: '#000000',
            },
          },
        };
      }

      // 饼图三
      function initPieData_03() {
        var scale = 1;
        let chartDS = [];
        for (var i = 0; i < props.chartData.length; i++) {
          let data = {
            name: '',
            value: '',
          };
          for (let key in props.chartData[i]) {
            if (props.head.xaxisField == key) {
              data.name = props.chartData[i][key];
            } else if (props.head.yaxisField == key) {
              data.value = props.chartData[i][key];
            }
          }
          chartDS.push(data);
        }
        chartDataSource.value = chartDS;

        var rich = {
          yellow: {
            color: '#ffc72b',
            fontSize: 30 * scale,
            padding: [5, 4],
            align: 'center',
          },
          total: {
            color: '#ffc72b',
            fontSize: 40 * scale,
            align: 'center',
          },
          white: {
            color: '#fff',
            align: 'center',
            fontSize: 14 * scale,
            padding: [21, 0],
          },
          black: {
            color: '#000',
            align: 'center',
            fontSize: 14 * scale,
            padding: [21, 0],
          },
          blue: {
            color: '#49dff0',
            fontSize: 16 * scale,
            align: 'center',
          },
          hr: {
            borderColor: '#616161',
            width: '100%',
            borderWidth: 1,
            height: 0,
          },
        };
        chartOption.value = {
          title: {
            text: '总数',
            left: 'center',
            top: '53%',
            padding: [24, 0],
            textStyle: {
              color: '#000',
              fontSize: 18 * scale,
              align: 'center',
            },
          },
          legend: {
            selectedMode: false,
            formatter: function (name) {
              var total = 0;
              var averagePercent;
              chartDS.forEach(function (value, index, array) {
                let v = value.value - 0;
                total += v;
              });
              return '{total|' + 11 + '}';
            },
            data: [chartDS[0].name],
            left: 'center',
            top: 'center',
            icon: 'none',
            align: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16 * scale,
              rich: rich,
            },
          },
          series: [
            {
              type: 'pie',
              radius: ['42%', '50%'],
              hoverAnimation: false,
              label: {
                normal: {
                  formatter: function (params, ticket, callback) {
                    var total = 0; //考生总数量
                    var percent = 0; //考生占比
                    chartDS.forEach(function (value, index, array) {
                      let v = value.value - 0;
                      total += v;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{black|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
                  },
                  rich: rich,
                },
              },
              labelLine: {
                normal: {
                  length: 55 * scale,
                  length2: 0,
                  lineStyle: {
                    color: '#616161',
                  },
                },
              },
            },
          ],
        };
      }

      watch(
        () => props.chartData,
        () => {
          props.chartData && initCharts();
        }
      );

      function handleChartClick(msg, type) {
        if (props.head.extendJs) {
          chartClick(type, msg);
        }
      }
      function chartClick(type, msg) {
        var onClick = {};
        eval(props.head.extendJs);
        if (onClick && onClick[type]) {
          onClick[type].call(msg, msg);
        }
      }
      return {
        handleChartClick,
        chartClick,
        chartDataSource,
        chartOption,
      };
    },
  });
</script>
<style scoped></style>
